import React from 'react';
import {
  ActivityIndicator,
  Alert,
  View,
  TouchableOpacity,
  TouchableWithoutFeedback,
  ToastAndroid,
  Dimensions,
  StyleSheet,
} from 'react-native';
//import CustomToast from './Toast/index';
import {Card, Button, Icon, Image, Text} from 'react-native-elements';
import HttpUtil from '../utils/HttpUtil';
import Loader from './loader';

class Profile extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      car_color: '',
      img_url: '',
      car_license: '',
      car_info: '',
      isLoading: false,
    };
  }
  componentWillMount() {
    let userinfo = global.storage
      .load({
        key: 'userState',
        autoSync: true,
        syncInBackground: true,

        syncParams: {
          extraFetchOptions: {},
        },
      })
      .then((ret) => {
        const userid = ret.user[0].id;
        const url = `http://localhost:3000/api/userinfo/${userid}`;
        HttpUtil.post(url).then((userinfo) => {
          console.log(userinfo.user[0].img_url);
          this.setState({
            car_info: userinfo.user[0].car_info,
            car_color: userinfo.user[0].car_color,
            car_license: userinfo.user[0].car_license,
            img_url: userinfo.user[0].img_url,
          });
        });
      });
  }
  DetectImage = async () => {
    // Alert.alert(
    //   'Alert Title',
    //   'sdfdsafsdadsafsafsa',
    //   [
    //     {
    //       text: 'Cancel',
    //       onPress: () => console.log('Cancel Pressed'),
    //       style: 'cancel',
    //     },
    //     {text: 'OK', onPress: () => console.log('OK Pressed')},
    //   ],
    //   {cancelable: false},
    // );
    const url = `http://localhost:3000/api/car/:img_url`;
    const data = {
      img_url: this.state.img_url,
    };
    this.setState({isLoading: true}); // Once You Call the API Action loading will be true
    HttpUtil.post(url, data).then((res) => {
      this.setState({isLoading: false});
      Alert.alert(
        '汽车车型 :' + JSON.parse(res.data).result[0].name.toString(),
        '汽车年份 :' + JSON.parse(res.data).result[0].year.toString() + '款',
      );
      // console.log(JSON.parse(res.data).result[0].name);
      // console.log(JSON.parse(res.data).result[0].year);
    });

    // HttpUtil.post(url, data).then((ret) => {
    //   console.log(JSON.parse(ret.data).result[0].name);
    //   console.log(JSON.parse(ret.data).result[0].year);
    //   // console.log(ret.result[0].store);
    // });

    // HttpUtil.uploadImage(url).then((res) => {
    // console.log(res);
    // });
  };
  render() {
    return (
      // implemented with Text and Button as children
      <Card
        style={{
          flex: 1,
          textAlign: 'center',
          AlignItems: 'center',
          justifyContent: 'center',
        }}>
        <Text style={{marginBottom: 10, textAlign: 'center', marginTop: 15}}>
          {this.state.car_license}
        </Text>

        <TouchableWithoutFeedback onLongPress={() => this.DetectImage()}>
          <View>
            <Image
              source={{uri: this.state.img_url}}
              style={{width: 300, height: 300}}
              PlaceholderContent={<ActivityIndicator />}
              // onPress={() => {
              //   console.log('pressed');
              // }}
            />
            <View
              style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
              {this.state.isLoading && <ActivityIndicator color={'#ffffff'} />}
            </View>
          </View>
        </TouchableWithoutFeedback>
        <Text style={{marginBottom: 10, textAlign: 'center', marginTop: 15}}>
          {this.state.car_info}
        </Text>
        {/* <Button
          icon={<Icon name="code" color="#ffffff" />}
          buttonStyle={{
            borderRadius: 0,
            marginLeft: 0,
            marginRight: 0,
            marginBottom: 0,
          }}
          title="VIEW NOW"
        /> */}
      </Card>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  horizontal: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    padding: 10,
  },
});

export default Profile;
